﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .outwidth
        {
            width: 300px;
            height: 200px;
            border: 30px solid #666;
            padding: 20px;
            margin: 300px;
            background-color: Gray;
            margin-right: 0;
            margin-bottom: 0;
            display: inline-block;
        }
        p
        {
            display: inline-block;
            margin: 0;
        }
        body
        {
            margin: 0;
        }
        .img_zoom
        {
            display: inline-block;
            float:left;
        }
        
        #zoomDivb
        {
            display: inline-block;
            background-color: #777;
            width: 300px;
            height: 200px;
            position: relative;
            left: 300px;
        }
    </style>
    <script src="../_scripts/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="../jackmoore-zoom-100369f/jquery.zoom.a.js" type="text/javascript"></script>
</head>
<body>  

<div class="img_zoom">
        <img src="../_images/Lighthouse.jpg" width="300px" height="200px" />
    </div>
    <div class="outwidth">
    </div>
    <p>
        <script type="text/javascript">
            document.write('width :' + $('.outwidth').width() + '<br/>');
            document.write('innerWidth :' + $('.outwidth').innerWidth() + '<br/>');
            document.write('outerWidth :' + $('.outwidth').outerWidth() + '<br/>');
            document.write('outerWidth(true) :' + $('.outwidth').outerWidth(true) + '<br/>');
        </script>
    </p>
  
    <script type="text/javascript">
        $(function () {
            $('.img_zoom').zoom();
        });
    </script>
</body>
</html>
